<template>
  <div class="index">
    <index-header v-show="bIsHeadShow" :options="optionNotTp" class="index-header-top"></index-header>
    <div class="index-con">
      <div v-show="!bIsHeadShow" class="index-con-top" style="display: none !important;">
        <!-- <index-header-clarity></index-header-clarity> -->
        <index-header :options="optionTp" class="index-header-top"></index-header>
      </div>

      <!-- 首页 banner -->
      <div class="index-con-banner incon-swiper">
        <el-carousel :loop="true" arrow="never">
          <el-carousel-item>
            <div class="banner-box">
              <div class="banner-left">
                <h1 class="banner-title">将您的商业信息 <br/> 精准传达给目标用户</h1>
                <p class="banner-tips">强大、易用的设计工具所见即所得的一站式体验</p>
                <span class="banner-line"></span>
                <p class="banner-btn">
                  <!-- <a href="javascript:;" @click.native="click2Admin">快速使用</a> -->
                  <router-link to="/admin">快速使用</router-link>
                </p>
              </div>

              <div class="banner-right">
                <img :src="`${env.publicPath}images/banner-0.png?201910221941`" alt="">
              </div>
            </div>
          </el-carousel-item>
          <!-- <el-carousel-item>aaa</el-carousel-item> -->
        </el-carousel>
      </div>

      <!-- 首页 分类 -->
      <div class="index-con-1">
        <div class="incon" style="display: flex;">
          <div class="index-con-1-tab">
            <a @click.stop="click2Tab('FESTIVAL')" :class="{'is-index-tab-active':tabType=='FESTIVAL'}" href="javascript:;"><span>节庆热点</span></a>
            <a @click.stop="click2Tab('MARKET')" :class="{'is-index-tab-active':tabType=='MARKET'}" href="javascript:;"><span>营销活动</span></a>
            <a @click.stop="click2Tab('BUSINESS')" :class="{'is-index-tab-active':tabType=='BUSINESS'}" href="javascript:;"><span>商用行业</span></a>
            <a @click.stop="click2Tab('NEWFIND')" :class="{'is-index-tab-active':tabType=='NEWFIND'}" href="javascript:;"><span>新奇发现</span></a>
          </div>

          <div class="index-con-1-list">
            <div v-show="tabType=='FESTIVAL'" class="index-con-1-item flow-left-in">
              <div class="item-box-0">
                <img :src="`${env.publicPath}images/jieqing_1.png`" alt="">
              </div>
              <div class="item-box-1">
                <img class="animate__animated animate__bounceIn delay-1s" :src="`${env.publicPath}images/jieqing_2.png`" alt="">
                <img class="animate__animated animate__flipInY delay-1s" :src="`${env.publicPath}images/jieqing_3.png`" alt="">
                <img class="animate__animated animate__bounceInUp delay-1s" :src="`${env.publicPath}images/jieqing_4.png`" alt="">
              </div>
            </div>
            <div v-show="tabType=='MARKET'" class="index-con-1-item flow-left-in">
              <div class="item-box-0">
                <img :src="`${env.publicPath}images/jieqing_1.png`" alt="">
              </div>
              <div class="item-box-1">
                <img class="animate__animated animate__bounceIn delay-1s" :src="`${env.publicPath}images/yingxiao_1.png`" alt="">
                <img class="animate__animated animate__flipInY delay-1s" :src="`${env.publicPath}images/yingxiao_2.png`" alt="">
                <img class="animate__animated animate__bounceInUp delay-1s" :src="`${env.publicPath}images/yingxiao_3.png`" alt="">
              </div>
            </div>
            <div v-show="tabType=='BUSINESS'" class="index-con-1-item flow-left-in">
              <div class="item-box-0">
                <img :src="`${env.publicPath}images/jieqing_1.png`" alt="">
              </div>
              <div class="item-box-1">
                <img class="animate__animated animate__bounceIn delay-1s" :src="`${env.publicPath}images/shangyong-1.png`" alt="">
                <img class="animate__animated animate__flipInY delay-1s" :src="`${env.publicPath}images/shangyong-2.png`" alt="">
                <img class="animate__animated animate__bounceInUp delay-1s" :src="`${env.publicPath}images/shangyong-3.png`" alt="">
              </div>
            </div>
            <div v-show="tabType=='NEWFIND'" class="index-con-1-item flow-left-in">
              <div class="item-box-0">
                <img :src="`${env.publicPath}images/jieqing_1.png`" alt="">
              </div>
              <div class="item-box-1">
                <img class="animate__animated animate__bounceIn delay-1s" :src="`${env.publicPath}images/xinqi_1.png`" alt="">
                <img class="animate__animated animate__flipInY delay-1s" :src="`${env.publicPath}images/xinqi_2.png`" alt="">
                <img class="animate__animated animate__bounceInUp delay-1s" :src="`${env.publicPath}images/xinqi_3.png`" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 首页 动效 -->
      <div class="index-con-2">
        <div class="incon">
          <div class="index-con-2-title">
            <h1>丰富的动效</h1>
            <p>多种风格任意挑选，你想要的，以及你想不到的，这里都有</p>
          </div>

          <div class="index-con-2-box">
            <div class="show-0">
              <img :src="`${env.publicPath}images/dongxiao_1.png`" alt="">
            </div>

            <div class="show-1">
              <img class="animate__animated animate__fadeIn" :src="`${env.publicPath}images/dongxiao_2.png`" alt="">
              <img class="animate__animated animate__bounceIn" :src="`${env.publicPath}images/dongxiao_3.png`" alt="">
              <img class="animate__animated animate__bounceInUp" :src="`${env.publicPath}images/dongxiao_4.png`" alt="">
            </div>
          </div>
        </div>
      </div>

      <!-- 首页 模版 -->
      <div class="index-con-3">
        <div class="incon">
          <div class="index-con-3-title">
            <h1>模板产品</h1>
            <p>品质高、可扩展、精心设计的模板，给您丰富的选择</p>
          </div>

          <div class="index-con-3-temp swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slider">
                <span><img class="animate__animated animate__bounceInUp" :src="`${env.publicPath}images/template_1.png`" alt=""></span>
              </div>
              <div class="swiper-slider">
                <span><img class="animate__animated animate__bounceInUp" :src="`${env.publicPath}images/template_2.png`" alt=""></span>
              </div>
              <div class="swiper-slider">
                <span><img class="animate__animated animate__bounceInUp" :src="`${env.publicPath}images/template_3.png`" alt=""></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 首页 功能 -->
      <div class="index-con-4">
        <div class="incon">
          <div class="index-con-4-title">
            <h1>为你设计提供一切可能</h1>
            <p>风格多样模板任意选用，强大的编辑功能，所见即所得，一站式管理</p>
          </div>

          <div class="index-con-4-intro">
            <ul>
              <li>
                <p class="animate__animated animate__bounceInUp" style="animation-delay:0s">
                  <i> <img :src="`${env.publicPath}images/zaixian.png`" alt=""> </i>
                  <b>在线编辑</b>
                  <span>随时线上编辑，便捷更新内容</span>
                </p>
                <p class="animate__animated animate__bounceInUp" style="animation-delay:.1s">
                  <i> <img :src="`${env.publicPath}images/kezi.png`" alt=""> </i>
                  <b>客咨收集</b>
                  <span>可视后台化统计信息，促进商业转化</span>
                </p>
                <p class="animate__animated animate__bounceInUp" style="animation-delay:.2s">
                  <i> <img :src="`${env.publicPath}images/shipin.png`" alt=""> </i>
                  <b>视频图集</b>
                  <span>视频图片，更强的运营展示</span>
                </p>
                <p class="animate__animated animate__bounceInUp" style="animation-delay:.3s">
                  <i> <img :src="`${env.publicPath}images/dongtai.png`" alt=""> </i>
                  <b>丰富动态</b>
                  <span>全局适用，灵活满足需求</span>
                </p>
              </li>
              <li>
                <p class="animate__animated animate__bounceInUp" style="animation-delay:.4s">
                  <i> <img :src="`${env.publicPath}images/chajian.png`" alt=""> </i>
                  <b>丰富插件</b>
                  <span>满足你想要的，以及你想不到的</span>
                </p>
                <p class="animate__animated animate__bounceInUp" style="animation-delay:.5s">
                  <i> <img :src="`${env.publicPath}images/bianjie.png`" alt=""> </i>
                  <b>便捷操作</b>
                  <span>便捷的交互方式，上手简单即学即会</span>
                </p>
                <p class="animate__animated animate__bounceInUp" style="animation-delay:.6s">
                  <i> <img :src="`${env.publicPath}images/yunduan.png`" alt=""> </i>
                  <b>云端数据</b>
                  <span>云端保存，随时随地的使用</span>
                </p>
              </li>
            </ul>
          </div>

          <div class="index-con-4-btn">
            <router-link to="/admin">立即使用</router-link>
          </div>
        </div>
      </div>
    </div>

    <index-footer></index-footer>
  </div>
</template>

<script>
  import IndexHeader from '@/views/child/header/index-header.vue'
  import IndexFooter from '@/views/child/index-footer.vue'
  import { reactive } from 'vue'

  export default {
    name: 'index',
    setup () {
      const state =  reactive({
        bIsHeadShow: false,
        tabType: 'FESTIVAL',
      })
      const state_ = {
        optionNotTp: {
          arrBtns: [0, 0, 0, 0, 1],
          transparent: false,
        },
        optionTp: {
          arrBtns: [0, 0, 0, 0, 1],
          transparent: true,
        },
      }
      _.merge(state, state_)
      return state
    },
    components: {
      IndexHeader,
      IndexFooter,
      // swiper,
      // swiperSlide,
    },
    created() {
      window.vm = this;
    },
    mounted() {
      // let that = this;

      // add scroll
      // v-scroll 并不好用
      window.addEventListener('scroll', this.handleScroll, false);
    },
    methods: {
      handleScroll() {
        // bIsHeadShow
        this.handleHaedSHow();


        // document.documentElement.scrollTop || document.body.scrollTop
        this.handleIndexConAnimate();
      },
      handleHaedSHow() {
        // bIsHeadShow
        if (window.scrollY > 100) {
          this.bIsHeadShow = true;
        }
        else {
          this.bIsHeadShow = false;
        }
      },
      handleIndexConAnimate() {
        // document.documentElement.scrollTop || document.body.scrollTop
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        const indexConNameList = ['index-con-1', 'index-con-2', 'index-con-3', 'index-con-4'];
        const offsetTop_conList = {};

        indexConNameList.forEach((item) => {
          // console.log(item, index);
          if(!document.querySelector('.' + item))
          {
            return
          }
          offsetTop_conList[item] = document.querySelector('.' + item).offsetTop;

          if(offsetTop_conList[item] - scrollTop > 750) {
            document.querySelector('.' + item + '>.incon').style.display = 'none';
          }
          else if(offsetTop_conList[item] - scrollTop < 750 && offsetTop_conList[item] - scrollTop > -750) {
            document.querySelector('.' + item + '>.incon').style.display = 'flex';
          }
          else if(offsetTop_conList[item] - scrollTop < -750) {
            document.querySelector('.' + item + '>.incon').style.display = 'none';
          }
        });
      },
      click2Tab(type) {
        this.tabType = type;
      },
      click2Admin() {
        this.$router.push({path: '/admin'});
      },
    },
    beforeUnmount() {
      // remove scroll
      window.removeEventListener('scroll', this.handleScroll, false);
    },
  }
</script>
<style lang="scss">
  @import '@/assets/scss/common.scss';
  .index{
    position: relative;
    width: 100%;
    height: auto;
  }

  .index-header-top{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .index-con{
    position: relative;
    width: 100%;
    z-index: 9;

    .index-con-top{
      position: absolute;
      padding-top: 22px;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1200px;
      z-index: 2;
    }

    .incon{
      position: relative;
      display: none;
      width: 100%;
      min-height: 750px;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
    }

    .index-con-banner{
      position: relative;
      height: 630px;
      // background-color: #127BFF;
      background-image: linear-gradient(to left, #185beb, #3941eb 0%);
      z-index: 1;

      .banner-box{
        display: flex;
        margin: 0 auto;
        width: 1200px;
        padding-top: 80px;
        justify-content: space-between;

        .banner-left{
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 440px;

          .banner-title{
            font-size: 32px;
            color: #fff;
            letter-spacing: 2.4px;
            line-height: 1.5;
            margin-bottom: 16px;
          }
          .banner-tips{
            font-size: 16px;
            font-weight: 300;
            color: #fff;
            letter-spacing: 0;
            // line-height: 50px;
            margin-bottom: 32px;
          }
          .banner-line {
            width: 20px;
            height: 5px;
            background-color: #f8633b;
            margin-bottom: 30px;
          }
          .banner-btn{
            width: 120px;
            line-height: 1;
            padding: 7px 0;
            background-color: rgba(0, 0, 0, 0.1);
            border-radius: 56px;
            border: solid 1px #fff;
            text-align: center;

            >a {
              font-size: 14px;
              line-height: 1;
              color: #fff;
            }
          }
        }
        .banner-right{
          display: flex;
          justify-content: right;

          img{
            width: 750px;
            height: 547px;
          }
        }
      }
    }
    .incon-swiper{
      position: relative;
      width: 100%;
      min-width: 1200px;
      min-height: 630px;

      .el-carousel{
        height: 100%;

        .el-carousel__container{
          height: 100% !important;

          .el-carousel__arrow{
            font-size: 36px !important;
            width: 60px !important;
            height: 60px !important;
          }
        }

        .el-carousel__indicators {
          bottom: 20px !important;

          .el-carousel__button {
            width: 8px !important;
            height: 8px !important;
            border-radius: 8px !important;
          }
        }
      }
    }

    .index-con-1{
      min-height: 750px;
      background: #fff;
      // padding-bottom: 77px;
    }
    .index-con-1-tab{
      display: flex;
      padding-top: 60px;
      width: 720px;
      justify-content: space-between;
      margin-bottom: 60px;

      a{
        position: relative;
        // font-family: PingFangSC-Regular;
        font-size: 18px;
        color: #43475C;
        letter-spacing: 1.46px;
        line-height: 1;
        padding: 12px 40px;

        span{
          position: relative;
          z-index: 2;
        }
      }
      .is-index-tab-active{
        color: #FFFFFF !important;
        // background: #127BFF;
        border-radius: 24px;
      }
      @-webkit-keyframes tabActive {
        0%{ left: -20%; }
        100%{ left: 0%;}
      }
      @keyframes tabActive {
        0%{ left: -20%; }
        100%{ left: 0%;}
      }
      .is-index-tab-active::after{
        position: absolute;
        z-index: 1;
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        animation: tabActive .3s ease-in-out 1;
        background-color: #127BFF;
        border-radius: 24px;
      }
    }
    .index-con-1-list{
      .index-con-1-item{
        position: relative;

        .item-box-0{
          img{
            width: 835px;
            height: auto;
            -webkit-box-shadow: 0px 5px 10px rgba(18, 123, 255, 0.1);
            box-shadow: 0px 5px 10px rgba(18, 123, 255, 0.1);
          }
        }
        .item-box-1{
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          height: 0;

          img{
            position: absolute;
            -webkit-box-shadow: 0px 5px 10px rgba(18, 123, 255, 0.1);
            box-shadow: 0px 5px 10px rgba(18, 123, 255, 0.1);
          }
          img:nth-child(1){
            top: 75px;
            left: -37px;
            width: 73px;
            height: auto;
          }
          img:nth-child(2){
            top: 58px;
            left: 305px;
            width: 225px;
            height: auto;
          }
          img:nth-child(3){
            top: 82px;
            right: -74px;
            width: 253px;
            height: auto;
          }
        }
      }
    }
    .index-con-2{
      min-height: 750px;
      background: #F6F7F9;
      // padding-bottom: 119px;
    }
    .index-con-2-title, .index-con-3-title, .index-con-4-title{
      padding-top: 98px;

      h1{
        // font-family: PingFangSC-Regular;
        font-size: 30px;
        color: #373438;
        letter-spacing: 2.43px;
        text-align: center;
        margin-bottom: 20px;
      }
      p{
        // font-family: PingFangSC-Light;
        font-size: 14px;
        color: #373438;
        letter-spacing: 0;
        text-align: center;
        margin-bottom: 54px;
      }
    }
    .index-con-2-box{
      position: relative;

      .show-0{
        img{
          width: 881px;
          height: 503px;
        }
      }
      .show-1{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        img{
          position: absolute;
        }
        img:nth-child(1){
          top: 67px;
          left: -37px;
          width: 201px;
          height: auto;
        }
        img:nth-child(2){
          top: 53px;
          left: 301px;
          width: 183px;
          height: auto;
        }
        img:nth-child(3){
          top: 80px;
          right: 49px;
          width: 250px;
          height: auto;
        }
      }
    }
    .index-con-3{
      min-height: 750px;
      background: #fff;
    }
    .index-con-3-temp{
      width: 100%;

      .swiper-wrapper{
        display: flex;
        width: 100%;
        justify-content: space-around;
      }

      span{
        position: relative;
        display: block;
        margin-top: 75px;

        img{
          display: block;
          width: 281px;
          height: auto;
        }
      }
      span::before{
        position: absolute;
        content: '';
        top: -88px;
        left: -72px;
        width: 424px;
        height: 586px;
        background-image: url('//static.hd.xxx.com/jye/fe-web/images/phone.png');
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 424px 586px;
      }
    }
    .index-con-4{
      min-height: 750px;
      background: #F6F7F9;
    }
    .index-con-4-intro{
      padding-top: 60px;

      ul, li{
        list-style: none;
      }

      li{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 167px;

        p{
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 58px;
          border-right: 1px solid #D8D8D8;
          height: 54px;
          justify-content: center;

          i{
            img{
              display: block;
              width: auto;
              height: 70px;
              margin-bottom: 8px;
            }
          }
          b{
            font-size: 24px;
            color: #43475C;
            letter-spacing: 0;
            text-align: center;
            margin-bottom: 10px;
          }
          span{
            font-size: 14px;
            color: #373438;
            letter-spacing: 0;
            text-align: center;
          }
        }
        p:last-child{
          border: none;
        }
      }
      li:last-child{
        margin-bottom: 125px;
      }
    }
    .index-con-4-btn{
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 100px;

      a{
        color: #fff;
        line-height: 1;
        padding: 17px 148px;
        background: #127BFF;
        box-shadow: 0 14px 17px 0 rgba(18,123,255,0.20);
        border-radius: 28px;
      }
    }
  }
</style>
